<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>

		<script src="../js/jquery.min.js"></script>
		<link href="../js/bootstrap.min.css" rel="stylesheet">
		<script src="../js/bootstrap.min.js"></script>
		<script src="../js/moment-with-locales.min.js"></script>
		<link href="../js/bootstrap-datetimepicker.min.css" rel="stylesheet">
		<link rel="stylesheet" href="css/drag.css" />
		<script src="../js/bootstrap-datetimepicker.min.js"></script>
	</head>


	<body>
		<div class='exportHtmlBox' >
			<span onclick='closeBuiderHtml()' class='closeBuidlerHtml'>&times;</span>
			<div id='exportHtml'>
				
			</div>
		</div>
		<div class='header'>
			<div class='w1200' style="padding: 0 20px;">
				
				<h1 >表单设计器
					<span id='frm_title'><!-- 标题 --></span>
					<button onclick='buiderHtml()' id='buiderHtml' style='display:none'>生成表单</button>
					<span style='float: right; font-size: 14px;margin-top: 16px;'>画布尺寸<input type="number" value="600" style="width: 80px;margin-left: 8px;" onchange='changeBoxSize()' id='changeSize' /></span>
					
				</h1>
				
				</div>
			</div>
		<div id="app" class='w1200'>
			
			<div class='row'>
				<div class="editorBox col-sm-3" id='dragBox'>
					<p class='textType'>分页符</p>
					<div class="form-group dragItem wordContent" data-type='DividerBoxTag' inputType='dividerType' draggable="true" style='display: inline-block;vertical-align: top;padding:5px 10px;'>
					<span class='dragItemInfo ' style='margin-bottom: 0;text-align: right;display: inline-block;'>分页符</span>
					</div>
					<p class='textType'>输入框</p>
					<div class="form-group dragItem" data-type='TextBoxTag' inputType='inputTextType' draggable="true" style='display: inline-block;vertical-align: top;padding:5px;'>
						<span  style='margin-bottom: 0;width: 80px;text-align: right;display: inline-block;' class='dragItemInfoBox'>
							<span class='isRequiredImg' style='vertical-align: middle;display: none;color: red;font-size: 20px;margin-top: 6px;'>*</span> 
							<span class='dragItemInfo'>文本框:</span>
						</span>
						<div style="display: inline-block;vertical-align: middle;">
							<input type="text"  class="form-control input-sm commonType inputName" style='display: inline-block;width: 160px;' />

							
						</div>
					</div>
					<p class='textType'>隐藏框</p>
					<div class="form-group dragItem" data-type='HiddenBoxTag' inputType='inputTextType' draggable="true" style='display: inline-block;vertical-align: top;padding:5px;'>
						<span  style='margin-bottom: 0;width: 80px;text-align: right;display: inline-block;' class='dragItemInfoBox'>
							<span class='isRequiredImg' style='vertical-align: middle;display: none;color: red;font-size: 20px;margin-top: 6px;'>*</span>
							<span class='dragItemInfo'> 隐藏框:</span>
						</span>
						<div style="display: inline-block;vertical-align: middle;">
							<input type="text" class="form-control input-sm inputName" style='display: inline-block;width: 160px;'/>
							
						</div>
					</div>
					<p class='textType'>多行文本框</p>
					<div class="form-group dragItem" data-type='TextAreaBoxTag' inputType='inputTextType' draggable="true" style='display: inline-block;vertical-align: top;padding:5px;'>
						<span  style='margin-bottom: 0;width: 80px;text-align: right;display: inline-block;' class='dragItemInfoBox'>
							<span class='isRequiredImg' style='vertical-align: middle;display: none;color: red;font-size: 20px;margin-top: 6px;'>*</span> 
							<span class='dragItemInfo'>多行文本框:</span>
						</span>
						<div style="display: inline-block;vertical-align: top;">
							<textarea class="form-control input-sm inputName"></textarea>
						</div>
					</div>
					<p class='textType'>时间选择器</p>
					<div class="form-group dragItem" data-type='DateBoxTag' inputType='dateType' draggable="true" style='display: inline-block;vertical-align: top;padding:5px;'>
						<span  style='margin-bottom: 0;width: 80px;text-align: right;display: inline-block;' class='dragItemInfoBox'>
							<span class='isRequiredImg' style='vertical-align: middle;display: none;color: red;font-size: 20px;margin-top: 6px;'>*</span> 
							<span class='dragItemInfo'>时间:</span>
						</span>
						<div style="display: inline-block;width: 160px;vertical-align: middle;" class='dateSelector'>
							<!--<div class='input-group date inputDate'>
								<input type="text" class="form-control inputName">
								<span class="input-group-addon">
                   							 <i class="glyphicon glyphicon-calendar"></i>
             					   </span>
							</div>-->
							<input type="date" />
						</div>
					</div>
					<!-- <p class='textType'>按钮</p>
					<div class="form-group dragItem" data-type='SubmitButtonTag' inputType='btnType' draggable="true" style='display: inline-block;vertical-align: top;padding:5px;'>
						<span class='dragItemInfo' style='margin-bottom: 0;text-align: right;display: inline-block;'>按钮:</span>

						<button class='btn btn-primary' style='border: 0px solid;'>提交按钮</button>

					</div> -->
					
					<p class='textType'>下拉选择框</p>
					<div class="form-group dragItem" data-type='SelectBoxTag' inputType='selectType' dataAttr='select' draggable="true" style='display: inline-block;vertical-align: top;padding:5px;'>
						<span class='dragItemInfo' style='margin-bottom: 0;width: 80px;text-align: right;display: inline-block;'>下拉选择框:</span>
						<div style="display: inline-block;vertical-align: middle;">
							<select name="" id="" class="form-control input-sm inputName" style="width: 100px;">
								<option value="">北京</option>
								<option value="">上海</option>
							</select>
						</div>
					</div>
					<p class='textType'>单选框</p>
					<div class="form-group dragItem" data-type='RadioBoxTag' inputType='checkType' dataAttr='radio' draggable="true" style='height: 30px;display: inline-block;vertical-align: top;padding:5px;'>
						<span class='dragItemInfo' style='margin-bottom: 0;width: 80px;text-align: right;display: inline-block;'>单选框:</span>
						<div style="display: inline-block;vertical-align: middle;">
							<label style="margin-left: 10px;"><span>男</span><input type="radio"  name='radio' class='inputName' style="margin-left: 5px;vertical-align:top" value='男'/></label>
							<label style="margin-left: 10px;"><span>女</span><input type="radio"  name='radio' class='inputName' style="margin-left: 5px;vertical-align:top" value='女'/></label>
						</div>
					</div>
					<p class='textType'>复选框</p>
					<div class="form-group dragItem" data-type='CheckBoxTag' inputType='checkType' dataAttr='checkbox' draggable="true" style='height: 30px;display: inline-block;vertical-align: top;padding:5px;'>
						<span class='dragItemInfo' style='margin-bottom: 0;width: 80px;text-align: right;display: inline-block;'>复选框:</span>
						<div style="display: inline-block;vertical-align: middle;">
							<label style="margin-left: 10px;"><span>北京</span><input type="checkbox" class='inputName' name='checkbox1' style="margin-left: 5px;vertical-align:top" value='北京'/></label>
							<label style="margin-left: 10px;"><span>上海</span><input type="checkbox" class='inputName' name='checkbox2' style="margin-left: 5px;vertical-align:top" value='上海'/></label>
						</div>
					</div>
					
					<p class='textType'>文件上传框</p>
					<div class="form-group dragItem" data-type='UploadifyBoxTag' inputType='uploadifyType' draggable="true" style='display: inline-block;vertical-align: top;padding:5px;'>
						<span class='dragItemInfo' style='margin-bottom: 0;width: 80px;text-align: right;display: inline-block;'>
							<span class='isRequiredImg' style='vertical-align: middle;display: none;color: red;font-size: 20px;margin-top: 6px;'>*</span> 文件上传框:
						</span>
						<div style="display: inline-block;vertical-align: middle;">
							<input type="file" class="file inputName" />
						</div>
					</div>

					<!-- <p class='textType'>颜色</p>
					<div class="form-group dragItem" inputType='colorType' draggable="true" style='display: inline-block;vertical-align: top;padding:5px;'>
						<span class='dragItemInfo' style='margin-bottom: 0;width: 80px;text-align: right;display: inline-block;'>颜色:</span>
						<div style="display: inline-block;vertical-align: middle;">
							<input type="color" class='inputName'/>
						</div>
					</div> -->

				</div>

				<div class="editorBox col-sm-5 editorBoxShow" style='overflow:scroll;' id='htmlBoxShow'>
					<form action="http://localhost:8888/" method="GET" id="htmlBox" style='width: 600px;margin: 0 auto;' onsubmit="return valid()">
					</form>
					
				</div>
				<div class=" formAttr editorBox col-sm-3" style="" id="formAttr">
					
					<div class="formAttrBox" >
						<h4><b>表单属性</b></h4>
						<div>
							<p id='textName' class='textShow colorShow selectShow checkShow btnShow dateShow wordShow dividerShow inputTextShow uploadifyShow'>文本名称:
								<input type="text" class="form-control input-sm" />
								<br />
							</p>
							<p id='btnName' class=' btnShow '>按钮文本:
								<input type="text" class="form-control input-sm" />
								<br />
							</p>
							<!--<p id='textContent'>文本内容:
								<input type="text" class="form-control input-sm" /></p>-->
							<p id='textPlaceHolder' class='textShow selectShow checkShow inputTextShow uploadifyShow'>提&nbsp;示&nbsp;语:
								<input type="text" class="form-control input-sm" />
								<br />
							</p>
								
							<p id='inputName' class='textShow colorShow selectShow dateShow checkShow inputTextShow uploadifyShow'>&nbsp;标 签 名:
								<!-- <input type="text" class="form-control input-sm" /> -->
								<select class='form-control input-sm' id='sel_name'>
									<option>请选择</option>
									<!-- <option value=''>姓名</option>
									<option value=''>性别</option> -->
								</select>

							</p>
							
							<!-- <p id='nameWidth' class='textShow colorShow selectShow checkShow btnShow dateShow'>名称宽度(像素):
								<input type="number" class="form-control input-sm" style='width: 70px;display: inline-block;' /><br />
							</p>
							
							<p id='fontSize' class='btnShow textShow colorShow selectShow checkShow dateShow wordShow'>字体大小(像素):
								<input type="number" class="form-control input-sm" style='width: 70px;display: inline-block;' />
							<br />
							</p> -->

							<!-- 新增 start -->
							
							<p id='xml_size' class='btnShow textShow colorShow    wordShow inputTextShow'>标签长度:
								<input type="number" class="form-control input-sm" style='width: 70px;display: inline-block;' value='20' />
							</p>
							
							<p id='xml_length' class='btnShow textShow colorShow    wordShow inputTextShow'>输入长度:
								<input type="text" class="form-control input-sm" style='width: 70px;display: inline-block;' value='0-30' />
							</p>
							
							<p id='xml_validate' class='btnShow textShow colorShow selectShow checkShow dateShow wordShow inputTextShow'>
								<fieldset style="margin-left:15px">
								    <legend style='font-size:15px'><b>表单验证</b></legend>

									<input type="text" class="form-control input-sm" style=' display: none;' value='' id='xml_validate_txt' />

									<!-- <br/> -->

									<!-- <br/> -->
									必填：<select class='form-control input-sm' id='xml_validate_required'>
										<option value=''>请选择</option>
										<option value='true'>true</option>
										<option value='false'>false</option>
									</select>
									<br/>
									<font>消息</font>：<input type="text" class="form-control input-sm" style=' display: inline-block;' value='' id='xml_validate_msg' />
								  </fieldset>
							</p>
							
							<p id='xml_onclick' class='btnShow textShow colorShow selectShow checkShow dateShow wordShow inputTextShow'>
								<fieldset style="margin-left:15px">
								    <legend style='font-size:15px'><b>表单事件</b></legend>
								    <input type="text" class="form-control input-sm" style=' display: none;' value='' id='xml_onclick_txt' />
									<!-- <br/> -->
									事件：<select class='form-control input-sm' id='xml_onclick_event'>
										<option value=''>请选择</option>
										<option value='onBlur'>onBlur</option>
										<option value='onChange'>onChange</option>
										<option value='onClick'>onClick</option>
									</select>
									<br/>
									<font>方法</font>：<select class='form-control input-sm' id='xml_onclick_func'>
										<option>请选择</option>
									</select>
								  </fieldset>
							</p>
							
							<p id='xml_dateFmt' class='btnShow textShow colorShow   dateShow wordShow'>日期格式:
								<!-- <input type="text" class="form-control input-sm" style=' display: inline-block;' value='yyyy-MM-dd' /> -->
								<select class='form-control input-sm'>
									<option value=''>请选择</option>
									<option value='YYYY-MM-DD'>YYYY-MM-DD</option>
									<option value='YYYY-MM-DD HH:MM'>YYYY-MM-DD HH:MM</option>
									<option value='YYYY-MM-DD HH:MM:SS'>YYYY-MM-DD HH:MM:SS</option>
								</select>
							</p>
							
							<p id='xml_dataValue' class='btnShow textShow colorShow selectShow checkShow dateShow wordShow inputTextShow'>默 认 值:
								<input type="text" class="form-control input-sm" style=' display: inline-block;' />
							</p>
							
							<!-- <p id='xml_flow' class='btnShow textShow colorShow selectShow checkShow dateShow wordShow'>工作流:
								<input type="text" class="form-control input-sm" style=' display: inline-block;' value='{"flowid":"402881964f4efbb9014f4f11f6600028","hidden":"","readonly":"","setvalue":""}' />
							</p> -->

							<!-- 新增 end -->

							<!-- <p id='btnfontColor' class='btnShow ' style="line-height: 30px;">
								
								字体颜色:
								<input type="color" style='width: 50px;margin-right: 40px;vertical-align: middle;' />
								<br />
							</p>
							<p id='fontColor' class='textShow colorShow selectShow checkShow dateShow wordShow' style="line-height: 30px;">
								
								字体颜色:
								<input type="color" style='width: 50px;margin-right: 40px;vertical-align: middle;' />
								<br />
							</p> -->
							
							<!-- <p id='buttonWidAndHeight' class='btnShow eleProprietary textShow '>按钮尺寸(像素):   
								<input type="number" class="form-control input-sm" style='width: 60px;display: inline-block;' />
								<input type="number" class="form-control input-sm" style='width: 60px;display: inline-block;' />
							<br />
							</p>
							
							<p id='inputWidAndHeight' class='textShow colorShow dateShow'>输入框宽/高(像素):
								<br />
								<input type="number" class="form-control input-sm" style='width: 70px;display: inline-block;' />
								<input type="number" class="form-control input-sm" style='width: 70px;display: inline-block;' />
								<br />
							</p> -->
							
							<!-- <p id='leftMargin' class='btnShow textShow colorShow selectShow checkShow dateShow wordShow'>左边距(像素):
								<input type="number" class="form-control input-sm" style='width: 70px;display: inline-block;' />
								<br />
							</p>
							
							<p id='topMargin' class='btnShow textShow colorShow selectShow checkShow dateShow wordShow'>上边距(像素):
								<input type="number" class="form-control input-sm" style='width: 70px;' />
								<br />
							</p> -->
							
							<div class='fontCont'>
							<p id='isReadonly' class='textShow dateShow inputTextShow' styl><label ><input type="checkbox"  style='width: 24px;'/>只读 </label></p>
							<!-- <p id='isRequire' class='textShow dateShow' styl><label ><input type="checkbox"  style='width: 24px;'/>必填项 </label></p>
							<p id='isDisable' class='btnShow textShow colorShow'><label><input type="checkbox"  style='width: 24px;'/>禁用 </label></p> -->
							<!-- <p id='isBolder' class='textShow colorShow selectShow checkShow dateShow wordShow'><label ><input type="checkbox"  style='width: 24px;'/>字体加粗 </label></p> -->
							<!-- <p id='isCenter' class='btnShow eleProprietary'><label ><input type="checkbox"  style='width: 24px;'/>居中 </label></p> -->
							</div>
							<!-- <p id='regType' class='textShow'>验证类型:
								<br />
								<label ><input type="radio" name='regRadio' checked value='no' style='width: 24px;'/>无 </label>
								<label ><input type="radio" name='regRadio' value='user'  style='width: 24px;'/>用户名 </label>
								<label ><input type="radio" name='regRadio' value='iphone' style='width: 24px;'/>手机号 </label>
								<label ><input type="radio" name='regRadio' value='email' style='width: 24px;'/>邮箱 </label>
							<br />
							</p> -->
							
							<!--<p id='addSelect' class='eleProprietary selectShow checkShow'>设置选项(换行为一个选项)
								<textarea style="vertical-align: top;width: 100px;height: 100px;font-weight: 100;"></textarea>
							<br />
							</p>-->
							<p id='addSelect' class='eleProprietary selectShow checkShow textShow dividerShow uploadifyShow'>设置数据源:
								<select name="" class='form-control input-sm ' style="" id='sel_datasource'>
								<!-- <select name="" class='form-control input-sm ' style="margin-top: 5px;"> -->
									<option value=''>请选择</option>
									<!-- <option value="http://www.baidu.com">http://www.baidu.com</option>
									<option value="http://www.baidu1.com">http://www.baidu1.com</option>
									<option value="http://www.baidu2.com">http://www.baidu2.com</option> -->
								</select>
							<br />
							</p>
							
							<p id='btnBgColor' class='btnShow eleProprietary'>按钮颜色:
								<input type="color" style='width: 50px;' />
								<br />
							</p>
							<!--<p id='btnColor'>字体颜色:
								<input type="color" style='width: 50px;' />
							</p>-->
							<div style="text-align: center;margin-top: 15px;">
<!--								<button id='closeFormAttr' onclick='closeFormAttr()'>取消</button>-->
								<button onclick='saveSettings()' id='saveSetBtn'>保存设置</button>
								
							</div>
							
						</div>
					</div>
				</div>
			</div>

		</div>

		<script src="js/drag.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
		$('.errorMessage').remove()
		$('#htmlBox').on('blur','input',function(){
			var getReg = $(this).attr('regData')
			if(getReg){
				var reg , regMessage;
				if(getReg=='user'){
					reg=/^[a-zA-Z0-9_-]{4,16}$/
					regMessage='长度4-16位（字母，数字，下划线，减号）'
				}else if(getReg=='iphone'){
					reg=/^((13|14|15|16|17|18)[0-9])\d{8}$/;
						regMessage='请输入正确的手机号码'
				}else if(getReg=='email'){
					reg =/^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/
						regMessage='请输入正确的邮箱号码'
				}
				if(reg.test($(this).val())){
						$(this).siblings('.errorMessage').remove()
				}else{
					$(this).siblings('.errorMessage').remove()
					var errorMessage =$("<span class='errorMessage' style='margin-left: 10px;color:red;font-size:12px'>"+regMessage+"</span>")
					$(this).after(errorMessage)
				}
					
			}else{
					if($(this).siblings('.errorMessage').length>0){
						$(this).siblings('.errorMessage').remove()
					}
				}
			
		})
		function valid(){
			$("#htmlBox .required").trigger("blur"); 
			if($("#htmlBox .errorMessage").length ==0){
				return true
			}else{
				return false
			}
			}
		$('form').on('submit',function(e){
			e.preventDefault()
		})
		</script>
	</body>

	<script src='../const.js'></script>
	<script src='../index.js'></script>
	<script src='../submit.js'></script>

</html>
